<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>放烟花效果</title>
		<style type="text/css">
		html,body{overflow:hidden;}
		body,div,p{margin:0;padding:0;}
		body{background:#000;font:12px/1.5 arial;color:#7A7A7A;}
		a{text-decoration:none;outline:none;}
		#tips,#copyright{position:absolute;width:100%;height:50px;text-align:center;background:#171717;border:2px solid #484848;}
		#tips{top:0;border-width:0 0 2px;}
		#tips a{font:14px/30px arial;color:#FFF;background:#F06;display:inline-block;margin:10px 5px 0;padding:0 15px;border-radius:15px;}
		#tips a.active{background:#FE0000;}
		#copyright{bottom:0;line-height:50px;border-width:2px 0 0;}
		#copyright a{color:#FFF;background:#7A7A7A;padding:2px 5px;border-radius:10px;}
		#copyright a:hover{background:#F90;}
		p{position:absolute;top:55px;width:100%;text-align:center;}
		.fire {
			width: 3px;
			height: 50px;
			background: white;
			position: absolute;
		} 
		.spark {
			position:absolute;
			width: 6px;
			height: 6px;
		}
		</style>
	<script src="../js/move.yintao1.05.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		document.addEventListener("click", function(e){
			var mousepoint = {x:e.clientX, y:e.clientY};
			var fire = document.createElement("div");
			fire.className = "fire";
			document.body.appendChild(fire);
			fire.style.left = mousepoint.x + "px";
			fire.style.top = window.innerHeight - fire.offsetHeight + "px";
			
			animate(fire, {top: mousepoint.y, height: 3}, {callback:function(){
				fire.remove();
				//随机了烟花的个数
				var count = Math.round(Math.random()*30) + 50;
				for(var i=0; i<count; i++){
					let spark = document.createElement("div");
					spark.className = "spark";
					//初始位置
					spark.style.left = mousepoint.x + "px";
					spark.style.top = mousepoint.y + "px";
					//随机颜色
					spark.style.background = "rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")";
					//随机速度
					let speedy = Math.random()*40 - 20;
					let speedx = Math.random()*40 - 20;
					
					let timer = setInterval(function(){
						console.log(spark);
						spark.style.left = spark.offsetLeft + speedx + "px";
						spark.style.top = spark.offsetTop + speedy++ + "px";
						if(spark.offsetTop > window.innerHeight) {
							spark.remove();
							clearInterval(timer);
						}
					},30);
					
					document.body.appendChild(spark);
				}
			}});
		});
	</script>
</head>
<body>
<div id="tips"><a id="manual" href="javascript:;" class="active">手动放烟花</a><a id="auto" href="javascript:;" class="">自动放烟花</a><a id="stop" href="javascript:;" class="">停止放烟花</a></div>
<p>由于浏览器渲染能力有限, 当浏览器为IE或选择自动放烟花时, 随机生成的烟花碎片范围自动调整至20-30</p>
<div id="copyright">建议使用Firefox, Chrome浏览器预览效果. </div>

</body></html>